<template>
	<view class="container rent-seedselect">
		<view class="seed-main">
			<view class="page-list" v-for="(item,idx) in 3" :key="idx">
				<view class="list-top">
					<image class="list-bg" :src="$fileUrl+'seed.png'" mode="aspectFill"></image>
					<view class="list-content">
						<view class="list-title">
							<text class="title-words">西瓜</text>
						</view>
						<view class="list-info">预估产量:20kg/m²</view>
						<view class="list-info">最小种植面积:10m²</view>
					</view>
				</view>
				<view class="list-bottom">
					<text class="seed-price-unit">￥</text>
					<text class="seed-price">100.00</text>
					<view class="num-box">
						<text class="iconfont">&#xe711;</text>
						<input class="num-input" type="number">
						<text class="iconfont">&#xe607;</text>
					</view>
				</view>

			</view>
			<view class="not-more" v-if="isLoading">加载中...</view>
			<view class="null-page" v-else-if="pageList.length<=0 ">
				<text class="iconfont">&#xe642;</text>
				<view class="null-page-tips">暂无数据~</view>
			</view>
			<view class="not-more" v-else-if="notMore">没有更多了...</view>
		</view>
		<view class="page-bottom">
			<view class="bottom-left">
				<view class="sur-land">剩余土地：5m²</view>
				<view class="total-box">
					<text>已选：0/5m²</text>
					<text style="margin-left: 40rpx;">总计：</text>
					<text class="total-price">100.00</text>
					<text>元</text>
				</view>
			</view>
			<view class="bottom-right yuan-btn btn-success" @click="goBack">确认</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, reactive, ref } from 'vue';
	const isLoading = ref(false)
	const pageList = ref([{ name: '123' }])
	const notMore = ref(true)
	onMounted(async () => { })
	const goBack=()=>{
		uni.navigateBack()
	}
</script>

<style lang="scss">
	.rent-seedselect {
		padding: 30rpx;
		padding-bottom: 130rpx;

		.page-list {
			background-color: #fff;
			box-shadow: 0 8rpx 10rpx 0 rgba(0, 0, 0, 0.1);
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			padding: 20rpx;

		}

		.list-top {
			display: flex;
			align-items: center;
		}

		.list-bg {
			width: 200rpx;
			height: 200rpx;
			border-radius: 10rpx;
			flex-shrink: 0;
		}

		.list-content {
			flex-grow: 1;
			margin-left: 30rpx;
		}

		.list-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.title-words {
			font-size: 34rpx;
			color: #232323;
			flex-grow: 1;
		}

		.seed-price-unit {
			font-size: 24rpx;
			color: #FF5F56;
		}

		.seed-price {
			font-size: 30rpx;
			flex-grow: 1;
			color: #FF5F56;
		}

		.list-info {
			font-size: 28rpx;
			color: #8F8F8F;
			margin-top: 10rpx;
		}

		.list-bottom {
			display: flex;
			align-items: center;
			border-top: solid 1px #eee;
			margin-top: 15rpx;
			padding-top: 15rpx;
		}

		.num-input {
			border: solid 1px #8F8F8F;
			width: 60rpx;
			padding: 4rpx 0;
			font-size: 28rpx;
			margin: 0 20rpx;
			text-align: center;
			border-radius: 4rpx;
		}

		.num-box {
			display: flex;
			align-items: center;

			.iconfont {
				font-size: 30rpx;
				color: #D8D8D8;
				padding: 10rpx 0;
			}
		}

		.page-bottom {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 120rpx;
			background: #FFFFFF;
			box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.1);
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx;
		}

		.bottom-right {
			width: 170rpx;
			height: 66rpx;
			border-radius: 66rpx;
		}

		.sur-land {
			font-size: 30rpx;
			color: #232323;
		}

		.total-box {
			font-size: 26rpx;
			color: #8F8F8F;
			margin-top: 10rpx;
		}

		.total-price {
			font-size: 30rpx;
			color: #FF5F56;
		}

	}
</style>